<template>
	<view v-if="load" :style="{
      backgroundColor: info.bg_color,
      paddingBottom: '30upx',
    }">
		<uni-head title="产品详情"></uni-head>
		<image :src="info.detail_img" mode="widthFix" class="bx-banner"></image>
		<view class="bx-card">
			<view class="bx-card-title">
				<text>{{info.name}}</text>
				<text class="bx-card-title-red" v-if="info.type_name">·{{info.type_name}}</text>
			</view>
			<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/bx-d-1.png" mode="widthFix"
				class="bx-card-title-line"></image>

			<view class="type_btn_body" v-if="info.select_list !== undefined&&info.select_list.length!=0">
				<view class="type_btn" v-for="(item,index) in info.select_list" :key="index"
					:class="item.chooseTrue ? 'active_btn' : ''" @click="changeBtn(index)">
					{{ item.name }}
				</view>
			</view>

			<view class="bx-card-table bx-card-table-t">
				<view class="bx-card-table-th bx-card-table-th-first">项目</view>
				<view class="bx-card-table-th bx-card-table-th-blue" v-for="(item,index) in chooseDta.fananlist"
					:key="index">方案{{index+1}}</view>
			</view>
			<view class="bx-card-table bx-card-table-t">
				<view class="bx-card-table-th bx-card-table-th-red">
					<view>高空保费</view>
					<view>（人/年）</view>
				</view>
				<view class="bx-card-table-th bx-card-table-th-red" v-for="(item,index) in chooseDta.fananlist"
					:key="index">{{chooseDta.fanan[item].price}}元</view>
			</view>
			<view class="bx-card-table">
				<view class="bx-card-table-head">死亡/伤残</view>
				<!-- <view class="bx-card-table-td bx-card-table-td-nb">150万/人</view> -->
				<view class="bx-card-table-td" v-for="(item,index) in chooseDta.fananlist" :key="index">{{item}}/人
				</view>
			</view>
			<view class="bx-card-table">
				<view class="bx-card-table-head">医疗费用</view>
				<view class="bx-card-table-td">
					<view>20万（医保范围，含合理必须的自费药，100%赔付）</view>
				</view>
			</view>
			<view class="bx-card-table">
				<view class="bx-card-table-head">误工费</view>
				<view class="bx-card-table-td bx-card-table-td-nb bx-card-table-center">
					<view>100元/天，以医生证明的建议休息天数（含实际 住院天数）计算，<text class="bx-card-table-color-red">最长180天</text>
					</view>
				</view>
			</view>
			<view class="bx-card-table">
				<view class="bx-card-table-head">法律费用</view>
				<view class="bx-card-table-td bx-card-table-td-nb">10万/年/服务商</view>
			</view>
			<view class="bx-card-table">
				<view class="bx-card-table-head" style="text-align: center">附加24小时意外</view>
				<view class="bx-card-table-td bx-card-table-left bx-card-table-td-nb">
					扩展在保人员全天24小时,因工作原因发生意外伤害意外事故导致死亡,伤残和医疗费赔偿。</view>
			</view>
			<view class="bx-card-table">
				<view class="bx-card-table-head">赔偿标准</view>
				<view class="bx-card-table-td bx-card-table-left bx-card-table-td-nb">
					<view>1、死亡/伤残：0免赔。</view>
					<view>2、医疗费用：0免赔，包含合理且必要的医保用药及自费药100%赔付。</view>
					<view>3、误工费：免费0天。误工天数的计算，根据医嘱建议休息天数，并结合实际伤情综合核定的最小时间，每人累计赔偿不超过180天。</view>
					<view>4、法律费用：无免赔</view>
					<view>5、年度累计赔偿限额 100
						万元，每次事故赔偿限额60万元，其中每次人身伤一赔偿限额50万元。每次财产损失赔偿限额10万元,每次事故财产损失绝对免赔额为RMB1000元或损失金额10%（以高者为准）,人伤无免赔。
					</view>
				</view>
			</view>
			<view class="bx-third-t">
				<text>附加第三者保障</text>
				<text class="bx-third-t-sm">（可选择投保）</text>
			</view>
			<view class="bx-third-center">
				<view class="bx-card-table-head bx-card-table-head-nb">可选附加险第三者责任</view>
				<view class="bx-third-center-right">
					<view class="bx-third-center-right-itme">

						<view>1、保障被保险人的工作人员在服务场所因意外或疏忽、过失,造成第三者人身伤亡或直接财产损失</view>
						<!-- <view>2、由于被保险人指定的工作人员在保险期限内提供的家用电器（含家用中央空调、新风系统、地暖系统、壁挂炉）新机首次安 装服务存在缺陷、瑕疵或安全隐患</view> -->
						<!-- <view>3、第三者责任保障仅针对一般家庭家用电器安维服务，若作业性质为商业项目的（包括但不限于商业中央空调、商业地暖系统等商业项目），无第三者责任保障（含现场三责),
              </view> -->
					</view>



					<view class="bx-third-center-right-itme bx-third-center-right-bottom">
						<!-- <view> 1、 含现场责任及90天新机。</view> -->
						<view> 1、年度累计赔偿限额 100 万元，每次事故赔偿限额 60万元，其中每次人身伤一赔偿限额 50万元。每次财产损失赔偿限额10万元。</view>
						<view> 2、每次事故财产损失绝对免赔额为RMB1000元或损失金额10%（以高者为准），人伤无免赔</view>
					</view>
				</view>
			</view>
			<view class="bx-card-table">
				<view class="bx-card-table-head">第三者保费</view>
				<view class="bx-card-table-td bx-card-table-td-nb bx-card-table-color-red">100元/人/年</view>
			</view>
			<!-- <image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/g1.png" mode="widthFix" class="bx-card-img"></image>
			<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/g2.png" mode="widthFix" class="bx-card-img"></image> -->
		</view>
		<view class="bx-lines"></view>
		<view class="bx-footer">
			<view class="bx-footer-left" @tap="toHome()">
				<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/tohome.png" class="bx-footer-icon"
					mode="widthFix"></image>
				<view class="bx-footer-left-txt">返回首页</view>
			</view>
			<view class="bx-footer-right-g" @tap="toForm()">立即投保</view>
		</view>
	</view>
</template>

<script>
	import uniHead from "@/components/uni-dead/head.vue";

	export default {
		components: {
			uniHead
		},
		data() {
			return {
				info: {},
				load: false,
				chooseDta: {}
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			changeBtn(index) {
				this.info.select_list.forEach((item) => {
					item.chooseTrue = false
				})
				this.info.select_list[index].chooseTrue = true
				this.chooseDta = this.info[this.info.select_list[index].value]
				this.$forceUpdate();
			},
			toForm() {
				uni.showModal({
					title: "重要提示",
					content: "尊敬的客户，您即将进入太平洋保险的产品投保流程。根据银监会[2020]26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读条款、责任免除、特别约定等内容。",
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							if (this.info.is_login == 0) {
								this.toast("请先登录");
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/login/login",
									});
								}, 1000);
								return;
							}
							uni.navigateTo({
								url: "/pages/bx/form?id=" + this.info.id,
							});
						}
					},
				});
			},
			getData() {
				uni.showLoading({
					title: "加载中",
				});
				this.ajax("index/detail", {
					data: {
						id: 7,
					},
					success: (res) => {
						this.info = res.msg;
						if (this.info.select_list.length > 0) {
							this.info.select_list[0].chooseTrue = true
							this.chooseDta = this.info[this.info.select_list[0].value]
						} else {
							this.chooseDta.fanan = this.info.fanan
							this.chooseDta.fananlist = this.info.fananlist
						}
						uni.hideLoading();
						this.load = true;
					},
				});
			},
			toHome() {
				uni.switchTab({
					url: "/pages/index/index",
				});
			},
		},
	};
</script>

<style>
	@import url("@/static/css/box/index.css");

	.type_btn_body {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.type_btn {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		border: 1rpx solid #E6E6E6;
		cursor: pointer;
		margin-right: 20rpx;
	}

	.active_btn {
		border: 1rpx solid #5180F9;
		color: #FFFFFF;
		background-color: #5180F9;
	}
</style>